<template>
  <div class="header">
    <div class="header-left">
      <a class="logo">
        <img src="../assets/img/logo.png" width="35" height="35" alt=""> <span>在线学习平台</span>
      </a>
    </div>
    <a id="toggle_btn" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
    <a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fa fa-bars"></i></a>
    <ul class="nav user-menu float-right">
      <li class="nav-item dropdown has-arrow">
       <el-dropdown>
        <span class="el-dropdown-link">
          <img class="rounded-circle" src="../assets/img/user.jpg" width="40" alt="Admin" style="padding-right: 5px">
          {{this.num}}-{{this.name}}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>

        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改个人信息</el-dropdown-item>
              <el-dropdown-item>查看个人信息</el-dropdown-item>
              <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </li>
    </ul>
  </div>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'


export default {
  name: "Header",
  components:{
    ArrowDown
  },
  data(){
    return{
      num:'',
      name:''
    }
  },
  created() {
    var userJsonStr = sessionStorage.getItem('User');
    let userEntity = JSON.parse(userJsonStr);
    this.num = userEntity.num;
    this.name = userEntity.name
  },
  methods:{
    logout(){
      this.$router.push('/');
      sessionStorage.removeItem('User')
    }
  }
}
</script>

<!--<style scoped src="../assets/css/bootstrap.min.css"></style>-->
<style scoped src="../assets/css/font-awesome.min.css"></style>
<style scoped src="../assets/css/font-awesome.min.css"></style>
<style scoped src="../assets/css/style.css"></style>
<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: White;
    display: flex;
    align-items: center;
    padding: 5px;
    font-size: 15px;
    font-weight: bold;
  }
</style>